<template>
  <div class="bc">
     <div class=" left_main"></div>
  <div class="mian">
    <div id="mt">
      <h3>Store System</h3>
    </div>
    <div class="method_pwd" v-show="loginMeth=='短信验证登录'">
      <div class="mm">
        <div class="bg" id="bg1"></div>
         <td class="checkMessage"><span style="display: block; margin-top: 15px; font-size: 13px; color: red; margin-left: 170px; ">{{emailMsg}}</span></td>
        <input id="uname" class="inp3" v-model="email" type="text" placeholder="请输入邮箱" />
      </div>
      <div class="mm " id="mm1">
        <div class="bg" id="bg2"></div>
        <input id="password" class="inp" v-model="password" type="password" placeholder="请输入密码" />
      </div>
    </div>

    <div class="method_code" v-show="loginMeth=='账号密码登录'">
      <div class="mm">
        <div class="bg" id="bg1"></div>
        <td class="checkMessage"><span style="display: block; margin-top: 15px; font-size: 13px; color: red; margin-left: 170px; ">{{phoneMsg}}</span></td>
        <input id="uname" class="inp3" v-model="phone" type="text" placeholder="请输入手机号码" />

      </div>
      <div class="mm " id="mm1">
        <div class="bg" id="bg2"></div>
        <input id="password" class="inp2" v-model="code"  placeholder="请输入验证码" />
        <el-button id="sendCode" @click="sendMsg" type="primary" :disabled="canClick">{{ content }}</el-button>
      </div>
    </div>


    <div id="regis_code">
      <el-button style="color: rgb(18, 131, 186);" type="text" @click="changeMethod">{{loginMeth}}</el-button>
    </div>

    <input id="btn" type="button" @click="login" value="LOGIN" />


    <div id="regis_herf">
      <el-link href="#/register" target="_self">还没有账号？立即注册</el-link>
    </div>

  </div>

  <div class="foot">
    &copy;版权所有&nbsp;&nbsp;&nbsp;&nbsp;95期&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;
    <a href="https://www.woniuxy.com">蜗牛学苑</a>
  </div>

  </div>
</template>

<script>
  export default {
    name: 'Login',
    data() {
      return {
        email: "",
        password: "",
        loginMeth:"短信验证登录",
        content: '获取验证码',
        totalTime: 60,
        canClick: false,
        phone:"",
        code:"",
        phoneMsg:"",
        emailMsg:"",
      }
    },
    methods: {
      login() {
        if(this.loginMeth=='短信验证登录'){
          var reg_email = /^\w+@\w+\.\w+$/;
          //判断
          var flag = reg_email.test(this.email);
        }
        else{
          flag = true;
        }

        if(flag){
          this.emailMsg="";
          this.$(".inp3").css("border","")
          this.$http.post("/account/login", {
            phone:this.phone,
            code:this.code,
            email: this.email,
            password: this.password
          }).then(resp => {
            
            if (resp.data.code == 200) {
              alert(resp.data.message)
              localStorage.setItem("loginUser", JSON.stringify(resp.data.data))
              console.log(resp)
              this.$router.push("/main");
            }else{
            this.$message.error(resp.data.message)
          }
            this.password = ""
          })
        }
        else{
            this.emailMsg="请输入正确的邮箱"
            this.$(".inp3").css("border", "1px solid red")
        }

      },

      changeMethod(){
        if(this.loginMeth=="短信验证登录"){
          this.loginMeth="账号密码登录";
          this.email= "";
          this.password= "";
          this.phoneMsg="";
          this.emailMsg="";
          this.$(".inp3").css("border","");
        }
        else{
          this.loginMeth="短信验证登录";
          this.phone="";
          this.code="";
          this.phoneMsg="";
          this.emailMsg="";
          this.$(".inp3").css("border","");
        }
      },
      sendMsg() {
        if(this.phone==""){
          this.phoneMsg="请输入手机号";
          this.$(".inp3").css("border", "1px solid red")
          }
        else{
          var reg_phoneNum = /^\w{11}$/;
          var f = reg_phoneNum.test(this.phone);
          if(f){
            this.$(".inp3").css("border","")
            this.$http.get("/account/sendCode",{
              params: {
                phone: this.phone
              }
            }).then(resp=>{
              console.log(resp)
            })

            this.phoneMsg=""
            if (this.canClick) return
            this.canClick = true
            this.content = this.totalTime + 's后重新发送'
            let clock = window.setInterval(() => {
              this.totalTime--
              this.content = this.totalTime + 's后重新发送'
              if (this.totalTime < 0) {
                window.clearInterval(clock)
                this.content = '重新发送短信'
                this.totalTime = 60
                this.canClick = false
              }
            }, 1000)
            }
          else{
            this.phoneMsg="请输入正确的手机号";
            this.$(".inp3").css("border", "1px solid red")
          }
        }
      },

    }
  }
</script>


<style scoped>
  * {
    margin: 0px;
    padding: 0px;

  }

  .bc {
    width: 100%;
    /* height:600px; */
    position: absolute;
    bottom: 0;
    top: 0;
    background-color: rgb(211, 227, 255);
  }


 .left_main {
   background: url("../assets/store.png") no-repeat center/cover rgb(238, 244, 253); ;
    opacity: 0.85;
    width: 340px;
    height: 400px;
    float: left;
    margin-top: 100px;
    margin-left: 300px;
  }


  .mian {
  background-color: white;
  width: 340px;
  height: 400px;
  float: left;
  margin-top: 100px;

  }


  .left_main::after,
  .main::after {
    content: '';
    display: block;
    clear: both;
  }

  .foot {
    margin-top: 30px;
    color: white;
    margin-left: 520px;
    float: left;

  }

  .foot::after {
    content: '';
    display: block;
    clear: both;
  }


  #mt {
    background-color: rgb(255, 255, 255,0);
    width: 340px;
    height: 70px;
    color: rgb(26, 113, 255);
    text-align: center;
    font-size: 25px;
    line-height: 70px;
  }

  .mm {
    width: 300px;
    height: 45px;
    margin: 15px auto;
    border-radius: 10px;
    position: relative;
  }

  .mm::after {
    content: '';
    display: block;
    clear: both;
  }

  .inp,.inp3{
    background-color: rgb(255, 255, 255,0.4);
    outline: snow;
    border-radius: 10px;
    border: 1px solid silver;
    width: 270px;
    height: 35px;
    font-size: 15px;
    position: absolute;
    bottom: 0px;
    left: 23px;
    float: left;
  }

  .inp2{
    background-color: rgb(255, 255, 255,0.4);
    outline: snow;
    border-radius: 10px;
    border: 1px solid silver;
    width: 130px;
    height: 35px;
    font-size: 15px;
    position: absolute;
    bottom: 0px;
    left: 23px;
    float: left;

  }

  .bg {
    width: 20px;
    height: 60px;
    position: absolute;
    bottom: 7px;
    float: left;
  }

  #bg1 {
    width: 20px;
    height: 22px;
    background-image: url("../assets/icon-login.png");
    background-position: -53px 0px;
  }

  #bg2 {
    width: 20px;
    height: 22px;
    background-image: url("../assets/icon-login.png");
    background-position: -106px 0px;
  }

  #sendCode{
    margin-left: 170px;
    margin-top: 10px;
    font-size: 15px;
    height: 33px;
    width: 120px;
    color: rgb(26, 113, 255);
    background-color: transparent;
    border-color: rgb(26, 113, 255);
    border-radius: 3px;
  }

  #ty {
    background-color: transparent;
    width: 270px;
    height: 40px;
    font-size: 20px;
    color: darkgrey;
    margin: 20px 35px;
    border-radius: 8px;

  }

  #btn {
    display: block;
    background-color: rgb(26, 113, 255);
    font-size: 20px;
    color: white;
    width: 270px;
    height: 40px;
    margin: 20px 35px;
    border: none;
    margin-top: 20px;
    cursor: pointer;
  }

  #regis_herf {
    text-align: center;
  }

  #regis_code{
    margin-left: 220px;
    font-size: 15px;
  }

  a {
    color: white;
    text-decoration: none;
  }
</style>
